<template>
	<view>
		<view class="title acea-row row-center row-center-wrapper">请选择要浏览的门店</view>
		<view class="shop" v-for="(item,index) in storeList" :key="index">
			<navigator 
				class="flex acea-row row-center-wrapper" 
				hover-class="none" 
				:url="'/pages/users/investment_store_detail/investment_store_detail?id=' + item.id" 
				open-type="navigate">
				<view class="left">
					<text>{{ item.name }}</text>
					<text class="num">编号：{{ item.storecode }}</text>
				</view>
				<text class="iconfont icon-xiangyou"></text>
			</navigator>
		</view>
		<view class="acea-row row-center-wrapper padding30" v-if="!nomore">加载中...</view>
		<view class="padding30"></view>
	</view>
</template>

<script>
	import { investorStoreList } from '@/api/store.js'
	export default {
		data() {
			return {
				storeList: [],
				page: 1,
				limit: 15,
				nomore: false
			};
		},
		onLoad() {
			this.getStoreList()
		},
		methods: {
			getStoreList() {
				if(this.nomore) return
				investorStoreList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					if(res.status == 200) {
						this.storeList = this.storeList.concat(res.data)
					}
					if(res.data.length < this.limit) {
						this.nomore = true
					}
				})
			}
		},
		onReachBottom() {
			this.page++
			this.getStoreList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.title {
		font-size: 32rpx;
		margin-top: 100rpx;
	}
	.shop {
		margin: 60rpx 30rpx 0;
		background-color: #fff;
		border-radius: 16rpx;
		font-size: 30rpx;
		.flex {
			justify-content: space-between;
			padding: 40rpx 30rpx;
			.left {
				display: flex;
				flex-direction: column;
				font-size: 32rpx;
				.num {
					font-weight: 400;
					color: #999;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
